<template>
	<div>
		<div class="pt16 flex mb16 border-bottom pb16" style="padding-bottom: 0;">
			<div><span class="pd2 blue white fz12">问</span></div>
			<div class="pl16 flexitem">
				<div class="lh20 fz15 mb8" style="width: calc(100% - 20px);word-break: break-all;">
					{{ data.title }}
				</div>
				<div v-if="data.questionImgs" class="flexsb" style="flex-wrap: wrap">
					<img  style="width: 30%" v-for="(item, index) in (data.questionImgs || '').split(',')" :key="index" :class="{ml8: index > 0}" :src="item" />
				</div>
				<div class="flexsb pt8 pb8" style="align-items: center;">
					<div class="flex" style="align-items: center;">
						<div class="br50 bgcommon" :style="{'background-image': `url(${data.avatar})`}"></div>
						<div class="ml8 fz15">{{ data.person }}</div>
					</div>
					<div class="fz12">
						{{ (data.createTime || '').split(' ')[0] }}
					</div>
				</div>
				<div v-if="['1', '2'].includes(type)" class="fz13">
					<div class="flexsb mb8">
						<span>预约人：{{ data.contactor }}</span>
						<!-- <span>预约时间：{{ data.expectedTime }}</span> -->
					</div>
					<div style="margin-bottom: 16px;">联系电话：{{ data.phone }}</div>
				</div>
			</div>
		</div>
		<div v-for="(item, index) in (data.replyList || [])" :key="index">
			<ExpertCard v-bind="{ icon: item.avatar, name: item.hidden === 1 ? '匿名' : item.person, rate: item.skillStar, job: item.level, company: item.company, date: item.createTime, bgc: '#F9F9F9' }" :item="item"/>
			<div class="pt16 flex mb16">
				<div><span class="pd2 bgred white fz12">答</span></div>
				<div class="pl16 border-bottom" style="width: calc(100% - 20px);word-break: break-all;">
					<div class="lh20 fz15 mb8" v-html="item.content">
					</div>
					<div class="flexsb" style="flex-wrap: wrap;justify-content: normal;" v-for="(ele, index) in (item.imgs || '').split(',')" :key="index">
						<img style="width: 30%;margin: 2px;height: 150px;" v-if="ele" :src="ele" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import ExpertCard from '@/components/expert-card'
import API from '@/services'
export default {
	data() {
		return {
			data: {
				questionImgs: '',
				replyList: [
				],
			},
		}
	},
	components: { ExpertCard },
	props: ['type', 'id'],
	async created() {
		const data = await API.getProblemDetail({ params: { problemId: this.id } })
		this.data = data
	},
}
</script>
<style lang="scss" scoped>
.br50{
	width: 21px;
	height: 21px;
}
</style>
